<template>
	<view class="index">
		<!-- 自定义头部 组件-->
		<musichead title="网易云音乐" :icon="showHeadIcon" titleColor="#282c35"></musichead>
		<!-- 内容区 -->
		<view class="container">
			<scroll-view scroll-y>
				<view class="scroll-container">
					<!-- 搜索区 -->
					<view class="search">
						<!-- 搜索图标 -->
						<view class="iconfont icon-search"></view>
						<!-- 搜索text -->
						<text class="search-text">搜索歌曲</text>
					</view>
					<!-- 搜索区结束 -->
					<!-- 歌曲分类区 ------------------------------------------------------------------------------------- -->
					<view class="index-list">
						<!-- 歌曲分类item -->
						<view class="index-list-item" v-for="(item,index) in IndexList" :key="index">
							<!-- 左侧图片 -->
							<view class="item-pic" @tap="handleToList(item.id)">
								<image :src="item.coverImgUrl" mode="widthFix"></image>
								<text>{{item.updateFrequency}}</text>
							</view>
							<!-- 右侧列表 -->
							<view class="item-list">
								<view class="item-list-title" v-for="(item2, index2) in item.tracks" :key="index2">
									{{index2 + 1}}.{{item2.first}} - {{item2.second}} 
								</view>
							</view>
						</view>
					</view>
					<!-- 歌曲分类区结束 -->
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import musichead from '../../components/musichead/musichead.vue'
	export default {
		components:{
			musichead
		},
		data() {
			return {
				// 自定义显示头部导航区图标
				showHeadIcon:false,
				IndexList:[]
			}
		},
		onLoad() {
			this.getIndexList()
		},
		methods: {
			// 请求列表数据
			async getIndexList(){
				const res = await this.$request({url:'/toplist/detail'})
				this.IndexList = res.list.slice(0, 3)
				// console.log(this.IndexList)
			},
			// 点击去往音乐列表页面
			handleToList(id){
				uni. navigateTo({
					url:`/pages/music-list/music-list?id=${id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.index{
		width: 100%;
		.music-head-title{
			color: #000000;
		}
		.container{
			scroll-view{
				.scroll-container{
					padding-top: 40rpx;
					// 搜索区
						.search{
							margin: 0 30rpx 30rpx 30rpx ;
							height: 70rpx;
							background-color: #f7f7f7;
							border-radius: 30rpx;
							display: flex;
							line-height: 70rpx;
							color: #a2a2a2;
							font-size: 28rpx;
							padding-left: 20rpx;
							.search-text{
								margin-left: 20rpx;
							}
						}
						// 歌曲分类列表区
						.index-list{
							.index-list-item{
								margin-left: 30rpx;
								margin-top: 30rpx;
								display: flex;
								// 左侧图片区
								.item-pic{
									flex: 1;
									position: relative;
									image{
										border-radius: 20rpx;
									}
									text{
										position: absolute;
										bottom:16rpx;
										left: 12rpx;
										color: #fff;
										font-size: 20rpx;
									}
								}
								// 右侧列表区
								.item-list{
									margin-left: 30rpx;
									flex: 2;
									display: flex;
									flex-direction: column;
									justify-content: space-around;
									font-size: 30rpx;
									color: #6c6c6c;
									// 设置文字一行显示,多余省略
									.item-list-title{
										overflow: hidden;
										text-overflow: ellipsis;
										display: -webkit-box;
										-webkit-line-clamp: 1;//改变行数
										-webkit-box-orient: vertical;
									}
								}
							}
						}
					}
				}
		}
	}
</style>
